<template>
    <div class="wrapper"
         v-show="showAbs"
         :style="opacityStyle"
    >
        <div class="header">
            <h1 class="header-text">上海迪士尼乐园</h1>
            <div class="header-left">
                <span class="iconfont back-icon">&#xe624;</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: false,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll: function () {
      const top = document.scrollingElement.scrollTop
      if (top < 40) {
        this.showAbs = false
      } else if (top > 40 && top < 240) {
        let Opacity = ((top / 240) >= 1) ? 1 : (top / 240)
        this.opacityStyle = {
          opacity: Opacity
        }
        this.showAbs = true
      } else {
        this.showAbs = true
        this.opacityStyle = {
          opacity: 1
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
    @import '~styles/variables.styl'
    .wrapper
        position: relative
        .header
            z-index: 2
            position: fixed
            top: 0
            left: 0
            right: 0
            line-height: .86rem
            background-color: $bgcolor
            height: 0.86rem
            .header-text
                padding: 0 1rem 0 1rem
                text-align: center
                color: #ffffff
                font-size: .32rem
            .header-left
                width: 0.64rem
                height: 0.86rem
                line-height: 0.86rem
                text-align: center
                position: absolute
                left: 0
                top: 0
                .back-icon
                    font-size 0.36rem
                    color: #ffffff
</style>
